<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>传智教育年会抽奖</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            text-align: center;
            margin-top: 100px;
        }

        .result {
            margin: 20px;
            font-size: 24px;
        }
    </style>
</head>

<body>

    <h1>传智教育年会抽奖</h1>
    <div class="result">一等奖：<span id="first"></span></div>
    <div class="result">二等奖：<span id="second"></span></div>
    <div class="result">三等奖：<span id="third"></span></div>

    <script>
        const names = ['周杰伦', '刘德华', '周星驰', '墙壁漏电', '张学友'];

        function xipai(arr) {
            for (let i = arr.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [arr[i], arr[j]] = [arr[j], arr[i]];
            }
            return arr;
        }

        const jieg = xipai([...names]);
        document.querySelector('#first').textContent = jieg[0];
        document.querySelector('#second').textContent = jieg[1];
        document.querySelector('#third').textContent = jieg[2];
    </script>

</body>

</html>